import { StyleSheet, ScrollView, Switch } from 'react-native';
import { router } from 'expo-router';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { useState } from 'react';

import { Text, View } from '@/components/Themed';
import Colors from '@/constants/Colors';
import { useColorScheme } from '@/components/useColorScheme';

export default function NotificationScreen() {
  const colorScheme = useColorScheme();
  const [notifications, setNotifications] = useState({
    pushNotifications: true,
    emailNotifications: false,
    smsNotifications: false,
    marketingEmails: false,
    priceAlerts: true,
    securityAlerts: true,
    appUpdates: true,
    newsUpdates: false,
  });


  const toggleNotification = (key: keyof typeof notifications) => {
    setNotifications(prev => ({
      ...prev,
      [key]: !prev[key]
    }));
  };

  const NotificationItem = ({ 
    icon, 
    title, 
    description, 
    value, 
    onToggle 
  }: {
    icon: string;
    title: string;
    description: string;
    value: boolean;
    onToggle: () => void;
  }) => (
    <View style={styles.notificationItem}>
      <View style={styles.notificationLeft}>
        <FontAwesome 
          name={icon as any} 
          size={20} 
          color={Colors[colorScheme ?? 'light'].text} 
        />
        <View style={styles.notificationText}>
          <Text style={styles.notificationTitle}>{title}</Text>
          <Text style={styles.notificationDescription}>{description}</Text>
        </View>
      </View>
      <Switch
        value={value}
        onValueChange={onToggle}
        trackColor={{ false: '#767577', true: '#007AFF' }}
        thumbColor={value ? '#fff' : '#f4f3f4'}
      />
    </View>
  );

  return (
    <ScrollView style={styles.container}>
      <View style={styles.content}>
          {/* 推送通知 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>推送通知</Text>
            <View style={styles.sectionContent}>
              <NotificationItem
                icon="bell"
                title="推送通知"
                description="接收应用推送消息"
                value={notifications.pushNotifications}
                onToggle={() => toggleNotification('pushNotifications')}
              />
              
              <NotificationItem
                icon="envelope"
                title="邮件通知"
                description="接收邮件通知"
                value={notifications.emailNotifications}
                onToggle={() => toggleNotification('emailNotifications')}
              />
              
              <NotificationItem
                icon="mobile"
                title="短信通知"
                description="接收短信通知"
                value={notifications.smsNotifications}
                onToggle={() => toggleNotification('smsNotifications')}
              />
            </View>
          </View>

          {/* 营销通知 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>营销通知</Text>
            <View style={styles.sectionContent}>
              <NotificationItem
                icon="bullhorn"
                title="营销邮件"
                description="接收产品推广和优惠信息"
                value={notifications.marketingEmails}
                onToggle={() => toggleNotification('marketingEmails')}
              />
            </View>
          </View>

          {/* 交易通知 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>交易通知</Text>
            <View style={styles.sectionContent}>
              <NotificationItem
                icon="line-chart"
                title="价格提醒"
                description="价格变动时通知"
                value={notifications.priceAlerts}
                onToggle={() => toggleNotification('priceAlerts')}
              />
              
              <NotificationItem
                icon="shield"
                title="安全提醒"
                description="账户安全相关通知"
                value={notifications.securityAlerts}
                onToggle={() => toggleNotification('securityAlerts')}
              />
            </View>
          </View>

          {/* 系统通知 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>系统通知</Text>
            <View style={styles.sectionContent}>
              <NotificationItem
                icon="download"
                title="应用更新"
                description="新版本发布通知"
                value={notifications.appUpdates}
                onToggle={() => toggleNotification('appUpdates')}
              />
              
              <NotificationItem
                icon="newspaper-o"
                title="新闻更新"
                description="行业新闻和资讯"
                value={notifications.newsUpdates}
                onToggle={() => toggleNotification('newsUpdates')}
              />
            </View>
          </View>

          {/* 通知时间设置 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>通知时间</Text>
            <View style={styles.sectionContent}>
              <View style={styles.timeItem}>
                <FontAwesome name="clock-o" size={20} color={Colors[colorScheme ?? 'light'].text} />
                <View style={styles.timeText}>
                  <Text style={styles.timeTitle}>免打扰时间</Text>
                  <Text style={styles.timeDescription}>22:00 - 08:00</Text>
                </View>
                <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
              </View>
            </View>
          </View>
        </View>
      </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    padding: 16,
  },
  section: {
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 12,
    paddingHorizontal: 4,
  },
  sectionContent: {
    backgroundColor: 'white',
    borderRadius: 8,
    overflow: 'hidden',
  },
  notificationItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  notificationLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  notificationText: {
    marginLeft: 12,
    flex: 1,
  },
  notificationTitle: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 2,
  },
  notificationDescription: {
    fontSize: 14,
    color: '#666',
  },
  timeItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
  },
  timeText: {
    marginLeft: 12,
    flex: 1,
  },
  timeTitle: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 2,
  },
  timeDescription: {
    fontSize: 14,
    color: '#666',
  },
});
